<template lang="pug">
.nav-f(v-if="getNavMenu")
  .mask(v-if="isShowSubmenu", @touchstart="hideSubMenu")
  ul.bottom-menu-list.tac(v-scroll.x='', :style='getNavMenuCountStr ? "justify-content: center;": ""')
    //- , :style='getNavMenu.length < 6 ? `width: ${100 / getNavMenu.length}%;` : ""'
    li.bottom-menu-item.pos-r(v-if="getNavMenu", v-for="(item, index) in getNavMenu", :key="index", @click="handleNavMenu(item, index)")
      p.new-text.pos-a(v-if="isLanjiukj && !item.is_menu_watch") new
      a(href="javascript:;", :class="{'has-icon': item.children && item.children.length > 0}", :style='getNavMenu.length < 6 ? "width: 100%;" : ""')
        .bottom-menu-text.omit
          van-icon(name="wap-nav", v-if="item.children && item.children.length > 0")
          span {{item.title}}

      ul.submenu(v-if="item.children && item.children.length && curIndex == index && isShowSubmenu")
        .submenu-content
          div(v-scroll.y='')
            li.item(v-for="(child, index) in item.children", :key="index", @click.stop="handleSubMenu(child, index)")
              p.text.omit {{child.title}}
              p.date-text(v-if="isLanjiukj") {{child.created.substr(0, 10)}}
              p.new-text.pos-a(v-if="isLanjiukj && !child.is_menu_watch") new
              //- (child.is_updated ? child.is_updated : !child.is_menu_watch)
</template>
<script>
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'

import {
  handleCustomMenu
} from '@/utils/menu'
import $API from '@/api/services'

export default {
  name: 'menuBar',
  mixins: [themeMixin, menuMixin],
  data() {
    return {
      isLanjiukj: $globalconfig.MODULES.IS_LANJIUKJ_PROGRAM_OPEN,
      curIndex: 0,
      isShowSubmenu: false
    }
  },
  computed: {
    getNavMenu() {
      if(this.menuData && this.menuData.navmenu && this.menuData.navmenu.length) {
        return this.menuData.navmenu
      }
      return false
    },
    getNavMenuCountStr() {
      let count = 0
      if (this.menuData && this.menuData.navmenu && this.menuData.navmenu.length) {
        this.menuData.navmenu.map(item => {
          count = count + item.title.length
        })
        // console.log(count)
        if (count > 22) {
          return false
        }
      }
      return true
    },
  },
  methods: {
    getNewTextShow(item) {
      if (!item.is_menu_watch) {
        return true
      }
      return false
    },
    hideSubMenu() {
      this.isShowSubmenu = false
    },
    handleNavMenu(item, index) {
      if(item.children && item.children.length) {
        if(index == this.curIndex) {

          this.isShowSubmenu = !this.isShowSubmenu
        } else {
          this.isShowSubmenu = true
        }
        // if (this.isLanjiukj && this.getNewTextShow(item)) {
        //   this.$store.dispatch('setNavmenuNew', {level: 0, id: item.menu_id || item.id})
        //   $API('sendMenuClick', [item.menu_id || item.id])
        // }
      } else {
        this.handleSubMenu(item)
      }
      this.curIndex = index
    },
    handleSubMenu(item) {
      this.isShowSubmenu = false
      handleCustomMenu(item)
      if (this.isLanjiukj && this.getNewTextShow(item)) {
        this.$store.dispatch('setNavmenuNew', {level: item.level, id: item.menu_id || item.id})
        $API('sendMenuClick', [item.menu_id || item.id])
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/styles/mixin.styl'
@import '../../../assets/styles/color.styl'
.nav-f
  position relative
  width 100%
  overflow inherit !important
  z-index 12
  .mask
    position: fixed
    bottom: 0
    left: 0
    width: 100vw
    height: 100vh
    z-index 12
  .bottom-menu-list
    display flex
    z-index: 13
    background-color: $white
    position relative
    .bottom-menu-item
      background-color: $white
      line-height: 36px
      color: $black
      &:not(:last-child)
        bdr-1px($gray)
      &:nth-of-type(1)
        .submenu
          transform: translate(2px, -100%)
      &:last-child
        .submenu
          transform: translate(-2px, -100%)
      & > a
        display: block
        padding: 5px 10px
        // width: 20vw
        box-sizing: border-box
        margin: 0 auto
        &.has-icon
          padding-left: 15px
      .new-text
        right 5px
        top -10px
        z-index 2
        height 0
        color #f00
        font-size 11px
      .van-icon
        vertical-align sub
        font-size 16px
        // position: absolute
        // top: 50%
        // left: 4px
        // transform: translateY(-50%)
      .bottom-menu-text
        font-size: 12px
        color: $black-light

      .submenu
        position: absolute
        top: -10px
        width: 100%
        border-radius: 4px
        background-color: $white
        transform: translateY(-100%)
        trangle-bottom(10px, $white)
        .submenu-content
          width: 100%
          max-height: 200px
          overflow-y: auto
          overflow-x hidden
          position: relative
          li
            // height = 35px
            // height: height
            // line-height: height
            overflow: hidden
            &:not(:last-child)
              bdb-1px($gray)
            a
              font-size: 12px
              color: $black-light
              // height: height
            .date-text
              height 12px
              line-height 12px
              width 100%
              font-size 10px
              color #999
  // .nav-list
  //   display: flex
  //   justify-content: center
  //   background: #eaeaea
  //   .nav-item
  //     position: relative
  //     flex: 1
  //     line-height: 40px
  //     .line
  //       position: absolute
  //       right: 0
  //       top: 5px
  //       bottom: 5px
  //       background: #ccc
  //       width: 1px

</style>
